<template>
  <div class="app">
    <HeaderComp title="选择MCC" class="head-top" />
    <div class="content">
      <div class="search-father">
        <div class="search-box">
          <van-icon name="search"></van-icon>
          <input type="text" v-model="query" placeholder="请输入关键字模糊搜索" @change="getMccList" />
        </div>
      </div>
      <div class="bank-list">
        <van-list
          v-model="loading"
          :finished="finished"
          :error.sync="error"
          finished-text="没有更多了"
          error-text="请求失败，点击重新加载"
          @load="onLoad"
        >
          <van-checkbox-group v-model="result">
            <van-cell-group>
              <van-cell
                v-for="(item, index) in list"
                clickable
                :key="index"
                :title="item.name"
                @click="toggle(item, index)"
              >
                <template #right-icon>
                  <van-checkbox :name="item.code" checked-color="#feb518" ref="checkboxes" />
                </template>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
        </van-list>
      </div>
      <div class="comfirm" v-if="false">
        <van-button block type="info" color="#FFB72F" @click="nextStep" class="next-step-btn">确认</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getMccList } from "@/api/mcc";
export default {
  name: "Mcc",
  components: {
    HeaderComp: () => import("@/components/HeaderComps")
  },
  data() {
    return {
      error: false,
      loading: false,
      finished: false,
      value: "",
      list: [],
      result: [],
      page: 1,
      pages: 10,
      total: 1,
      query: ""
    };
  },
  mounted() {
    getMccList(1).then(res => {
      if (res.code == 200) {
        let dataList = res.data.records;
        this.total = res.data.total;
        this.pages = res.data.pages;
        this.list = dataList;
      }
    });
  },
  methods: {
    getMccList() {
      getMccList(1, this.query).then(res => {
        if (res.code == 200) {
          let dataList = res.data.records;
          this.list = dataList;
        }
      });
    },
    onLoad() {
      if (this.page > this.pages) {
        this.finished = true;
      } else {
        this.page++;
        getMccList(this.page, this.query).then(res => {
          if (res.code == 200) {
            let dataList = res.data.records;
            dataList.forEach(i => {
              this.list.push(i);
            });
          }
        });
        this.loading = false;
      }
    },
    toggle(item, index) {
      this.$refs.checkboxes[index].toggle();
      this.$store.commit("setMcc", item);
      this.$router.go(-1);
      // setTimeout(() => {
      //     this.$router.push("/step1");
      // }, 300);
    }
  }
};
</script>

<style lang="less" scoped>
.app {
  background: #f9f9f9;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  padding-top: 236px;
}
.content {
  height: 100%;
  .search-father {
    background: #f9f9f9;
    padding: 24px 0;
    position: fixed;
    top: 112px;
    left: 0;
    right: 0;
    z-index: 98;
    .search-box {
      display: flex;
      align-items: center;
      background: #fff;
      width: 80%;
      height: 76px;
      border-radius: 15px;
      margin: 0 auto;
      font-size: 31px;
      padding-left: 15px;
      input {
        border: none;
        margin-left: 10px;
        flex: 1;
      }
    }
  }
  .bank-list {
    padding-bottom: 100px;
  }
  .comfirm {
    padding: 90px 75px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 98;
    background: #fff;
  }
}
</style>
